---
title: '@roots/bud-babel'
description: Transpile JavaScript with Babel
sidebar_label: '@roots/bud-babel'
---

[Babel](https://babeljs.io) can be added by installing the [@roots/bud-babel](/extensions/bud-babel) extension.

## Installation

```sh npm2yarn
npm install @roots/bud-babel --save-dev
```

## Configuration

[@roots/bud-babel](/extensions/bud-babel) comes configured with:

- [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env)
- [@babel/plugin-transform-runtime](https://babeljs.io/docs/en/babel-plugin-transform-runtime)

## Presets

Presets are registered to `bud.babel.presets`.

```ts title=bud.config.ts
console.dir(bud.babel.presets)
```

### Add a preset

It will be appended to whatever presets are already registered.

```ts title=bud.config.ts
bud.babel.setPreset('@babel/preset-env')
```

### Remove preset

Use `bud.babel.unsetPreset` to remove a preset, if present.

```ts title=bud.config.ts
bud.babel.unsetPreset('@babel/preset-env')
```

### Fully override preset configuration

Pass an array of presets to `bud.babel.setPresets` to fully replace the existing presents configuration.

```ts title=bud.config.ts
bud.babel.setPresets(['@babel/preset-env'])
```

### Set options on a preset

```ts title=bud.config.ts
bud.babel.setPresetOptions('@babel/preset-env', {
  useBuiltIns: 'entry',
})
```

## Plugins

Managing plugins uses nearly the exact same API.

### Add a plugin

```ts title=bud.config.ts
bud.babel.setPlugin('@babel/plugin-transform-runtime')
```

### Add a plugin with options

```ts title=bud.config.js
bud.babel.setPlugin(['@babel/plugin-transform-runtime', {helpers: false}])
```

### Remove a plugin

```ts title=bud.config.js
bud.babel.unsetPlugin('@babel/plugin-transform-runtime')
```

### Override any plugin options

```ts title=bud.config.ts
bud.babel.setPluginOptions('@babel/plugin-transform-runtime', {
  helpers: false,
})
```

### Fully override plugins

```ts title=bud.config.js
bud.babel.setPlugins(['@babel/plugin-transform-runtime'])
```
